<template>
	<view class="nav-content">
		<view class="type-box">
			<view class="item active">全部</view>
			<view class="item">新招呼</view>
			<view class="item">仅沟通</view>
			<view class="item">有交换</view>
		</view>
		<scroll-view class="scroll" :scroll-y="true">
			<view class="list-item" v-for="item in 10">
				<image class="pic" src="@/static/img/chat/pic.jpg" mode="scaleToFill" />
				<view class="right">
					<view class="f-jb">
						<text>曾先生贝多音乐.人事部HR </text>
						<text class="time">昨天15：15</text>
					</view>
					<view class="content">可以啊</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	
import { toRefs } from 'vue';
const props = defineProps({
	list: {
		type: Object,
		default(rawProps) {
			return []
		}
	},
})
const { list } = toRefs(props);
</script>

<style scoped lang="scss">
	
	.nav-content {
		margin-top: -30rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
	}
	.type-box {
		width: 100%;
		height: 112rpx;
		display: flex;
		background: #ffffff;
		align-items: center;
	
		.item {
			margin: 0 32rpx;
			padding: 32rpx 0;
			font-size: 30rpx;
			color: #5a5a5a;
		}
	
		.item.active {
			font-size: 34rpx;
			color: #000000;
			position: relative;
		}
	
		.item.active::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 10rpx;
			border-radius: 5rpx;
			background: #1872ff;
		}
	}
	
	.scroll {
		height: calc(100vh - 370rpx - 100rpx);
		padding-left: 32rpx;
	
		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 180rpx;
			padding: 10rpx 0;
	
			.pic {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}
	
			.right {
				width: 582rpx;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				align-content: space-evenly;
				border-bottom: 1rpx solid #ebebeb;
				padding-right: 28rpx;
	
				.f-jb {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					color: #1c1c1c;
	
					.time {
						font-size: 22rpx;
						color: #5a5a5a;
					}
				}
	
				.content {
					font-size: 22rpx;
					color: #5a5a5a;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>